import React, { Component } from 'react';
import CustomStatusBar from '../../components/custom-status-bar';
import { View, Image, TouchableOpacity } from 'react-native-ui-lib';
import { Dimensions, StyleSheet, FlatList, TouchableWithoutFeedback } from 'react-native';
import Video from 'react-native-video';
const { width, height } = Dimensions.get('window');
const STATUSBAR_HEIGHT = 0;
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],//我模拟的数据 这个就自行找一些视频url就好
            isPause: false, //控制播放器是否播放，下面的代码有解释一个列表只需要一个state控制，而不用数组
            current: 0,//表示当前item的索引，通过这个实现一个state控制全部的播放器
        }
        this.viewabilityConfig = {
            waitForInteraction: true,
            viewAreaCoveragePercentThreshold: 30
        }
    }

    componentDidMount() {
        let { data = [] } = require('../../static/mock_data/listData/index.json');
        this.setState({
            data: data
        })
    }

    renderItem = ({ item, index }) => {
        return (<View style={{ width: width, height: height }}>
            <TouchableWithoutFeedback style={{ flex: 1 }} onPress={() => {
                this.setState({
                    isPause: !this.state.isPause,
                })
            }}>
                {
                    <Video source={{ uri: item.url }}
                        style={{ flex: 1, backgroundColor: '#000' }}
                        repeat={true}
                        paused={index === this.state.current ? this.state.isPause : true}
                        resizeMode='cover'
                        fullscreen={true}
                    >
                    </Video>
                }
            </TouchableWithoutFeedback>
            {/* 屏幕中央 播放按钮 */}
            {
                this.state.isPause ?
                    <View center flex style={{ position: 'absolute', width: width, height: height }}>
                        <TouchableOpacity
                            onPress={() => {
                                this.setState({
                                    isPause: !this.state.isPause,
                                })
                            }}
                        >
                            <Image source={require('./assets/images/play.png')} resizeMode={'contain'} style={{ width: 60, height: 60 }} />
                        </TouchableOpacity>
                    </View> : null
            }
        </View>
        )
    }

    _onViewableItemsChanged = ({ viewableItems, changed }) => {
        if (viewableItems.length === 1) {
            this.setState({
                current: viewableItems[0].index,
            })
        }
    }

    componentWillUnmount() {
        this.setState({
            isPause: false
        })
    }


    render() {
        let { data = [] } = this.state;
        return (
            <View style={{ flex: 1 }}>
                <FlatList
                    initialNumToRender={1}
                    style={{ height: height }}
                    data={data}
                    renderItem={this.renderItem}
                    horizontal={false}
                    pagingEnabled={true}
                    refreshing={true}
                    getItemLayout={(data, index) => {
                        return { length: height, offset: height * index, index }
                    }}
                    keyExtractor={(item, index) => index.toString()}
                    viewabilityConfig={this.viewabilityConfig}
                    showsHorizontalScrollIndicator={false}
                    onViewableItemsChanged={this._onViewableItemsChanged}
                />
                <CustomStatusBar {...this.props} />
            </View>
        );
    }
}

export default Home;